<template>
    <el-card>
        <template #header>
            <div class="title">关键词搜索</div>
        </template>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="content">
                    <div class="title mb-5">搜索用户数</div>
                    <div class="count mb-5">{{ totalUser }}</div>
                    <v-chart class="chart" :option="setOption(1)" autoresize></v-chart>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="content">
                    <div class="title mb-5">搜索量</div>
                    <div class="count mb-5">{{ totalSearch }}</div>
                    <v-chart class="chart" :option="setOption(0)" autoresize></v-chart>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" class="mb-10" :height="240">
            <el-table-column type="index" label="排名" width="60" align="center" />
            <el-table-column prop="word" label="关键字" align="center" />
            <el-table-column prop="count" label="搜索数量" align="center" />
            <el-table-column prop="user" label="搜索用户数" align="center" />
            <el-table-column prop="percent" label="搜索占比" align="center" />
        </el-table>
        <el-pagination @current-change="currentChange" v-model:currentPage="page" :page-size="limit"
            layout="prev, pager, next" :total="total">
        </el-pagination>

    </el-card>
</template>

<script setup lang="ts">
import useEchartStore from '@/stores/echart';
import { computed, ref } from 'vue';
const echartStore = useEchartStore();
const searchWord = computed(() => {
    return echartStore.echartData.searchWord
})
const totalUser = computed(() => {
    return searchWord.value.reduce((prev, item) => {
        return prev + item.user
    }, 0)
})
const totalSearch = computed(() => {
    return searchWord.value.reduce((prev, item) => {
        return prev + item.count
    }, 0)
})
const wordList = computed(() => {
    return searchWord.value.map(item => {
        return item.word
    })
})
const userList = computed(() => {
    return searchWord.value.map(item => {
        return item.user
    })
})
const countList = computed(() => {
    return searchWord.value.map(item => {
        return item.count
    })
})
const setOption = (val: number) => {
    return {
        xAxis: {
            show: false,
            data: wordList.value
        },
        yAxis: {
            show: false
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: 0,
            bottom: 0,
            left: 0,
            right: 0
        },
        series: {
            name: val == 1 ? '搜索用户数' : '搜索量',
            type: 'line',
            data: val == 1 ? userList.value : countList.value,
            smooth: true,
            itemStyle: {
                opacity: 0
            },
            lineStyle: {
                color: 'hotpink'
            },
            areaStyle: {
                color: 'skyblue'
            }
        }
    }
}
const page = ref(1)
const limit = ref(5)
const total = ref(0)

const currentChange = (val: number) => {
    page.value = val
}
const searchWordAll = computed(() => {
    total.value = searchWord.value.length
    return searchWord.value.map(item => {
        return {
            ...item,
            percent: (item.user / totalUser.value * 100).toFixed(2) + '%'
        }
    })
})

const tableData = computed(() => {
    return searchWordAll.value.slice(5 * (page.value - 1), 5 * page.value)
})
</script>

<style lang="scss" scoped>
.title {
    height: 20px;
    font-size: 16px;
}

.content {
    .title {
        font-size: 14px;
        color: #aaa;
    }

    .count {
        font-size: 22px;
        letter-spacing: 1px;
    }

    .chart {
        height: 50px;
    }
}
</style>